<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <title>VUE学习 - 1-5-2 登录和退出页面</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>

<body>

  <!--载入vue.js-->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <div id="Application" style="text-align: center;">
    <h1>{{title}}</h1>
    <div v-if="noLogin">账号：<input v-model="userName" type="text" /> </div>
    <div v-if="noLogin">密码：<input v-model="password" type="password" /> </div>
    <button class="n_login" @click="click">{{buttonTitle}}</button>
  </div>
  <script>
    const App = {
      data() {
        return {
          title: "欢迎您：未登录",
          noLogin: true,
          userName: "",
          password: "",
          buttonTitle: "登录"
        }
      },
      methods: {
        click() {
          if (this.noLogin) {
            this.login()
          } else {
            this.logout()
          }
        },

        //登录
        login() {
          if (this.userName.length > 0 && this.password.length > 0) {
            alert(`用户名：${this.userName}  密码：${this.password}`)
            this.noLogin = false
            this.title = `欢迎您：${this.userName}`
            this.buttonTitle = "注销"
            this.userName = ""
            this.password = ""
          } else {
            alert("请输入账号密码")
          }
        },

        //登出
        logout() {
          this.noLogin = true
          this.title = '欢迎您：未登录'
          this.buttonTitle = "登录"
        }
      }
    }
    Vue.createApp(App).mount("#Application")
  </script>

  <style>
    .n_login {
      border-radius: 30px;
      width: 100px;
      margin: 20px auto;
      color: white;
      background-color: blue;
    }
  </style>


</body>

</html>